#tag layout_block("headContent")
<!-- daterange picker -->
<link href="resources/plugins/daterangepicker/daterangepicker-bs3.css" rel="stylesheet" type="text/css" />
<!-- daterangepicker -->
<script src="resources/plugins/daterangepicker/moment.min.js" type="text/javascript"></script>
<script src="resources/plugins/daterangepicker/daterangepicker.js" type="text/javascript"></script>

<script src="resources/scripts/service/statistics.js" type="text/javascript"></script>
#end

#tag layout_block("mainContent")
<section class="content-header">
  <h1>
    Statistics
    <small>overview</small>
  </h1>
  <ol class="breadcrumb">
    <li><a href=""><i class="fa fa-home"></i> Home</a></li>
    <li><a href="services"><i class="fa fa-connectdevelop"></i> Services</a></li>
    <li>${service}</li>
    <li class="active">Statistics</li>
  </ol>
</section>

<!-- Main content -->
<section class="content">
    <div class="row margin-bottom">
        <form id="statisticsSearchForm" action="services/statistics?service=${service}" method="post">
        <div class="col-xs-12">
            <input type="text" hidden="hidden" id="invokeDateFrom" name="invokeDateFrom"/>
            <input type="text" hidden="hidden" id="invokeDateTo" name="invokeDateTo"/>
            <a class="btn btn-default pull-right" id="searchDateRange">
                <i class="fa fa-calendar"></i>
                <span>Date range picker</span>
                <i class="fa fa-caret-down"></i>
            </a>
        </div>
        </form>
    </div>

  <div class="row">
    <div class="col-xs-12">
      <div class="box box-primary">
        <div class="box-header">
          <h3 class="box-title">List of Statistics</h3>

          <div class="box-tools">
            <div class="input-group" style="width: 200px;">
              <input type="text"
                     name="table_search"
                     class="form-control input-sm pull-right"
                     placeholder="Method"/>

              <div class="input-group-btn">
                <button class="btn btn-sm btn-default"><i class="fa fa-search"></i></button>
              </div>
            </div>
          </div>
        </div>
        <!-- /.box-header -->
        <div class="box-body table-responsive no-padding">
          <table class="table table-hover table-striped">
            <thead>
            <tr>
              <th>Method</th>
              <th>Success</th>
              <th>Failure</th>
              <th>Avg Elapsed (ms)</th>
              <th>Max Elapsed (ms)</th>
              <th>Max Concurrent</th>
            </tr>
            </thead>
            <tbody>
            #for(row : rows)
            <tr>
              <td>${row.method}</td>
              <td><span class="badge bg-gray">${row.consumerSuccess}</span> <i class="fa fa-arrow-circle-right"></i> <span class="badge bg-green">${row.providerSuccess}</span></td>
              <td><span class="badge bg-gray">${row.consumerFailure}</span> <i class="fa fa-arrow-circle-right"></i> <span class="badge bg-green">${row.providerFailure}</span></td>
              <td><span class="badge bg-gray">${row.consumerAvgElapsed}</span> <i class="fa fa-arrow-circle-right"></i> <span class="badge bg-green">${row.providerAvgElapsed}</span></td>
              <td><span class="badge bg-gray">${row.consumerMaxElapsed}</span> <i class="fa fa-arrow-circle-right"></i> <span class="badge bg-green">${row.providerMaxElapsed}</span></td>
              <td><span class="badge bg-gray">${row.consumerMaxConcurrent}</span> <i class="fa fa-arrow-circle-right"></i> <span class="badge bg-green">${row.providerMaxConcurrent}</span></td>
            </tr>
            #end
            </tbody>
          </table>
        </div>
        <!-- /.box-body -->
      </div>
      <!-- /.box -->
    </div>
  </div>

</section>
#end
#include ("../common/main_layout.html")
